<!doctype html>
<html>
    <head>
        <title>HT for Web 属性面板手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 属性面板手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a> </li><li><a href="#ref_propertypane">属性面板组件</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>提供了属性面板组件，该组件增强了<code>ht.widget.PropertyView</code>组件的展示及操作功能，提供了可视化的切换排序、过滤和分组的界面功能。</p>

<p>使用属性面板组件需要在引入<code>ht.js</code>核心库之后，再引入一个<code>ht-propertypane.js</code>的属性面板插件库。</p>

<div id="ref_propertypane"></div>

<h2>属性面板组件</h2>

<p><code>ht.widget.PropertyPane</code>为属性面板类，其构造函数可传入<code>ht.DataModel</code>对象，其主要可配置属性和函数如下：</p>

<ul><li>通过<code>getPropertyView</code>获取<code>ht.widget.PropertyView</code>对象</li><li>通过<code>getToolbarHeight</code>和<code>setToolbarHeight</code>获取和设置工具条高度</li><li>通过<code>getHeaderHeight</code>和<code>setHeaderHeight</code>获取和设置表头高度</li><li>通过<code>getHeaderLabels</code>和<code>setHeaderLabels</code>获取和设置表头文字内容，例如<code>setHeaderLabels([&#39;属性&#39;, &#39;值&#39;])</code></li><li>通过<code>getHeaderLabelColor</code>和<code>setHeaderLabelColor</code>获取和设置表头文字颜色</li><li>通过<code>getHeaderLabelFont</code>和<code>setHeaderLabelFont</code>获取和设置表头文字字体</li><li>通过<code>getHeaderLabelAlign</code>和<code>setHeaderLabelAlign</code>获取和设置表头文字水平对齐方式，默认为<code>center</code></li><li>通过<code>setCaseSensitive</code>和<code>isCaseSensitive</code>获取和设置过滤是否考虑大小写，默认为<code>false</code></li><li>通过<code>getIndent</code>和<code>setIndent</code>获取和设置工具条图片缩进</li><li>通过<code>getSelectBackground</code>和<code>setSelectBackground</code>获取和设置工具条按钮选中背景色</li><li>通过<code>getCategoryIcon</code>和<code>setCategoryIcon</code>获取和设置工具条分组按钮图标</li><li>通过<code>getSortIcon</code>和<code>setSortIcon</code>获取和设置工具条排序按钮图标</li><li>通过<code>getSortFunc</code>和<code>setSortFunc</code>获取和设置工具条排序逻辑规矩</li><li>通过<code>addProperties</code>可批量增加属性信息，该函数是对<code>PropertyView#addProperties</code>的包装           </li></ul>

<p><iframe src="examples/example_propertypane.html" style="height:260px"></iframe></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;PropertyPane&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;   
        &lt;style&gt;
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        &lt;/style&gt;    

        &lt;script src=&quot;../../../../lib/core/ht.js&quot;&gt;&lt;/script&gt; 
        &lt;script src=&quot;../../../../lib/plugin/ht-propertypane.js&quot;&gt;&lt;/script&gt;   
        &lt;script&gt;
            function init(){                                                                
                dataModel = new ht.DataModel();
                tablePane = new ht.widget.TablePane(dataModel);
                propertyPane = new ht.widget.PropertyPane(dataModel);                    
                splitView = new ht.widget.SplitView(tablePane, propertyPane, &#39;h&#39;, 0.6);                                

                view = splitView.getView();
                view.className = &#39;main&#39;;
                document.body.appendChild(view);    
                window.addEventListener(&#39;resize&#39;, function (e) {
                    splitView.invalidate();
                }, false);   

                var attributes = [
                    {
                        name: &#39;id&#39;,
                        displayName: &#39;Id&#39;                        
                    },                    
                    {
                        name: &#39;superClass&#39;,
                        displayName: &#39;Super Class&#39;,   
                        categoryName: &#39;Class&#39;,
                        getValue: function(data){
                            var superClass = data.getClass().superClass;
                            return superClass.getClassName ? superClass.getClassName() : &#39;Object&#39;;
                        }
                    },                    
                    {
                        name: &#39;className&#39;,
                        displayName: &#39;Class&#39;,
                        categoryName: &#39;Class&#39;
                    },  
                    {
                        name: &#39;_image&#39;,                        
                        displayName: &#39;Image&#39;,  
                        categoryName: &#39;Image&#39;,
                        accessType: &#39;field&#39;,
                        width: 110
                    },                             
                    {
                        name: &#39;icon&#39;,
                        displayName: &#39;icon&#39;,  
                        categoryName: &#39;Image&#39;,
                        width: 120,
                        enum: {
                            values: [&#39;node_icon&#39;, &#39;edge_icon&#39;, &#39;group_icon&#39;, &#39;shape_icon&#39;, &#39;subGraph_icon&#39;, &#39;grid_icon&#39;], 
                            icons: [&#39;node_icon&#39;, &#39;edge_icon&#39;, &#39;group_icon&#39;, &#39;shape_icon&#39;, &#39;subGraph_icon&#39;, &#39;grid_icon&#39;]
                        }                        
                    }                                       
                ];

                tablePane.addColumns(attributes);
                propertyPane.addProperties(attributes);

                [ht.Data, ht.Node, ht.Edge, ht.Group, ht.Grid, ht.Shape, ht.SubGraph, ht.Grid].forEach(function(clazz){
                    data = new clazz();
                    dataModel.add(data);                    
                });
                dataModel.sm().ss(data);
            }


        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload=&quot;init();&quot;&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
